import React, { useEffect } from 'react';
import SearchOutlined from '@material-ui/icons/SearchOutlined';
import { useCmd, NavListSub, is_empty } from 'sui';
import { TraceView } from './trace';

const Trace = ({ mod, sideopen }) => <TraceView mod={mod} sideopen={sideopen}/>;

const NavTrace = ({ event, setEvent, ...props }) => {
    const umd = useCmd("file/list/cell");

    useEffect(() => {
        if (event) {
            const v = event.split(",");
            const f = v.find(d => d === "trace" | d === "update");
            if (f) {
                umd.reload();
                setEvent("");
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [event]);

    const get_model = () => {
        const data = umd.value;
        if (is_empty(data)) {
            return null;
        }

        let ret = [];

        data.forEach(d => {
            ret.push({uid: `trace.${d.sn}`, value: d.name, sub: d.sn});
        });

        return ret;
    };

    return <NavListSub icon={<SearchOutlined/>} sub={get_model()} {...props}/>;
};

export {NavTrace, Trace};
